<template>
  <div id="login">
    <div class="container">
      <el-form ref="login" :rules="rules" :model="user">
        <el-form-item>
          <img src="../../assets/images/logo.png" alt="" />
        </el-form-item>
        <p class="title">登录</p>
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
            v-model="user.username"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            @keydown.enter.native="submit"
            v-model="user.password"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="submit"
            >登录</el-button
          >
        </el-form-item>
        <div class="ewmDiv">
          <img src="../../assets/images/exam_teacher.png" />
          <span>教师端APP</span>
        </div>
        <div class="ewmDiv">
          <img src="../../assets/images/login_ewm.png" />
          <span>学生端APP</span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "index",
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      loading: false,
      rules: {
        username: { required: true, message: "用户名不能为空！" },
        password: { required: true, message: "密码不能为空！" }
      }
    };
  },
  methods: {
    ...mapActions(["login", "exitLogin"]),
    submit() {
      this.loading = true;
      this.$refs.login.validate(valid => {
        if (valid) {
          this.login(this.user)
            .then(() => {
              // console.log(user);
              const user = JSON.parse(localStorage.getItem("user"));
              if (user.data.userType != 4) {
                this.$notify.success("登录成功！");
                this.$router.push({ name: "Dashboard" });
                this.$refs.login.resetFields();
              } else if (user.data.userType == 4) {
                // console.log(user);
                document.cookie = `stuToken=${user.data.token}`;
                localStorage.clear();
                // window.location.href = "http://192.168.0.18:8081/";
                window.location.href = user.data.stuUrl;
              }
            })
            .catch(err => {
              err.message && this.$notify.error(`${err.message},登录失败!`);
            })
            .finally(() => {
              this.loading = false;
            });
        } else return false;
      });
    }
  }
};
</script>

<style scoped>
#login {
  background: #2d3a4b;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../../assets/images/bg.jpg") no-repeat center;
}
.container {
  background: url("../../assets/images/form_bg.png") no-repeat center;
  box-shadow: none;
  background-size: 100% 100%;
  width: 72.6vw;
  height: 47vw;
  padding: 3.8vw 0vw 0vw 1.9vw;
  box-sizing: border-box;
}

.el-form {
  width: 66.7vw;
  height: 38.3vw;
  /*padding: 30rem;*/
  padding-left: 49vw;
  padding-right: 3vw;
  padding-top: 2.1vw;
  box-sizing: border-box;
  position: relative;
}
.el-form::before {
  content: "";
  background: url("../../assets/images/form_left.png") no-repeat;
  background-size: 31.6vw 26.9vw;
  background-position-x: 5.5vw;
  background-position-y: 7.3vw;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 43vw;
  display: block;
}
.el-form .el-button {
  width: 100%;
}
.el-form img {
  width: 100%;
}
.el-input >>> .el-input__inner {
  border-radius: 20px;
  background-color: rgba(168, 170, 173, 0.1);
  border: none;
}
.el-button {
  border-radius: 20px;
  width: 12vw !important;
  background-image: linear-gradient(-90deg, #1786f9 0%, #4ea5ff 100%);
  box-shadow: 0vw 0.3vw 0.8vw 0vw rgba(24, 135, 250, 0.35);
  margin: auto;
  margin-top: 3vw;
  display: block;
}
.title {
  line-height: 1.5vw;
  text-align: center;
  font-size: 1.6vw;
  margin-bottom: 3.3vw;
  margin-top: 5.4vw;
  font-weight: normal;
  color: #394151;
}
.el-form >>> .el-form-item__error {
  right: 0;
  text-align: center;
}
.ewmDiv {
  width: 5vw;
  height: 5vw;
  text-align: center;
  float: right;
  margin-right: 1.5vw;
  margin-top: 1vw;
}
.ewmDiv img {
  /* 		 max-width: 98px;
		 max-height: 98px; */
  width: 100%;
}
.ewmDiv span {
  color: #a6a6a6;
  font-size: 14px;
  display: block;
  width: 100%;
}
</style>
